<!--
 * @Date: 2023-09-14 17:18:41
 * @LastEditTime: 2023-10-12 11:25:14
 * 介绍:
-->
<route lang="json">
{
  "meta": {
    "title": "t('wei-gui-ci-lie-biao')"
  }
}
</route>
<script lang="ts" setup>
import { apiWkBanWordTotal } from "@@/api/wk/list";
import { useCrequestListRef } from "@@/components/common/CrequestList";

const CrequestListRef = useCrequestListRef();
const searchText = ref<string>();
const inSearch = ref(false);
async function search() {
  if (!searchText.value || !CrequestListRef.value) return;
  inSearch.value = true;
  CrequestListRef.value.data.length = 0;
  await nextTick();
  await CrequestListRef.value.rerequest();
}
async function exitSearch() {
  searchText.value = "";
  console.log("exitSearch");

  if (!inSearch.value) return;
  inSearch.value = false;
  await nextTick();
  CrequestListRef.value?.rerequest();
}
</script>
<template>
  <CpageView>
    <VanForm @submit="search">
      <Rinput
        v-model="searchText"
        :placeholder="'search'"
        :type="'search'"
        right-icon="search"
        @click-right-icon="search"
        @clear="exitSearch"
        clearable
        :clear-trigger="'always'"
        border-mode="all"
        class="R-max"
      >
      </Rinput>
    </VanForm>
    <div class="MT-md C-T3">{{ $t("wei-gui-ci-ku") }}</div>
    <CrequestList
      :params="{ searchText }"
      :api="apiWkBanWordTotal"
      ref="CrequestListRef"
      class="MT-sm"
    >
      <template #default="{ list }">
        <div class="flex-wrap gap-sm">
          <Ccard v-for="item in list" class="PD-sm">
            {{ item.word }}
          </Ccard>
        </div>
      </template>
    </CrequestList>
    <van-floating-bubble
      axis="xy"
      magnetic="x"
      @click="$router.push({ name: 'wk-addBanWord' })"
    >
      <van-icon color="var(--C-white)" name="plus" />
    </van-floating-bubble>
  </CpageView>
</template>
<style lang="scss" scoped></style>
